<template>
  <div class="register-container">
    <div class="register-container-left">
      <el-image style="width: 650px; height: 500px ; border-radius: 5px;" :src="url" />
    </div>
    <div class="register-container-right">
      <h1 class="register-text">注册</h1>
      <el-form :model="userattribute" :rules="rules" label-width="120px" class="register-form" status-icon
        hide-required-asterisk @keyup.enter.native="RegisterClick">
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userattribute.username" type="text" />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="userPassword">
          <el-input v-model="userattribute.userPassword" type="password" show-password />
        </el-form-item>
        <!-- 性别 -->
        <el-form-item label="性别" prop="sex">
          <el-select v-model="userattribute.sex" class="m-2">
            <el-option v-for="item in sexs" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <!-- 电子邮箱 -->
        <el-form-item label="邮箱" prop="userEmail">
          <el-input v-model="userattribute.userEmail" type="text" />
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item label="验证码" prop="identifying_code">
          <el-input v-model="userattribute.identifying_code" type="text" class="w-50 m-2" />
        </el-form-item>
        <el-image style="width: 150px; height: 70px ; border-radius: 5px; margin-left: 120px; margin-bottom: 10px;"
          :src="verificationImg" @click="updataverificationImg" />
        <!-- 注册按钮  -->
        <el-form-item>
          <el-button type="primary" @click="RegisterClick" :disabled="!canSubmit">注册</el-button>
          <el-button type="primary" @click="Gotologin">前往登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed, reactive } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios';
import api from '../api/api';
import { ElMessage } from 'element-plus';

const router = useRouter()

let verificationImg = ref('')//接受验证码

const url = ref('https://guet-lab.oss-cn-hangzhou.aliyuncs.com/api/2022/11/18/5d296990-5d2b-4245-86f7-f34a4da52a3b.jpg')

const userattribute = reactive({//初始化
  username: '',
  userPassword: '',
  sex: '男',
  userEmail: '',
  identifying_code: ''
})


const sexs = [
  {
    value: '男',
    label: '男',
  },
  {
    value: '女',
    label: '女',
  },
]

const rules = reactive({//验证
  username: [
    { required: true, message: '用户名必填', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
  ],
  userPassword: [
    { required: true, message: '密码必填', trigger: 'blur' },
    { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' },
  ],
  identifying_code: [
    { required: true, message: '验证码必填', trigger: 'blur' },
    { min: 5, max: 5, message: '请输入 5 个字符', trigger: 'blur' },
  ],
  sex: [
    { required: true, message: '请选择性别', trigger: 'blur' },
  ],
  userEmail: [
    { required: true, message: '电子邮箱必填', trigger: 'blur' },
    { min: 10, max: 20, message: '长度在 10 到 20 个字符', trigger: 'blur' },
  ]
})


function RegisterClick() {
  api.userRegister({
    user: { username: userattribute.username, userPassword: userattribute.userPassword, sex: userattribute.sex, userEmail: userattribute.userEmail }
    , identifying_code: userattribute.identifying_code
  }).then(
    res => {
      if (res.data.code == 200) {
        ElMessage({
          message: '注册成功',
          type: 'success'
        })
      }
    }).catch(
      err => { console.log(err) })
}

function Gotologin() {
  router.push({
    name: 'login'
  })
}

//更新验证码
function updataverificationImg() {
  axios.get('/path/users/getCode', { responseType: 'blob' }).then((response) => {
    verificationImg.value = window.URL.createObjectURL(response.data)
  })
}


//一个只读的计算属性
const canSubmit = computed(() => {
  const { username, userPassword, userEmail, identifying_code } = userattribute
  return Boolean(username && userPassword && userEmail && identifying_code)
})


onMounted(() => {
  axios.get('/path/users/getCode', { responseType: 'blob' }).then((response) => {
    verificationImg.value = window.URL.createObjectURL(response.data)
  })
})
</script>

<style scoped>
.register-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.register-form {
  width: 25vw;
  min-width: 300px;
  margin-right: 100px;
}

.register-text {
  margin-left: 120px;
  font-size: 40px;
}

.el-form-item {
  margin-bottom: 22px;
}

.register-container-right {
  width: 350px;
}
</style>